<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-radio-checkbox margin-top-10">
      <switch-button v-model="pattern" title="选择样式" btnStr_0="单选" btnStr_1="多选" :isClick="false" class="switch-button" @change="onChangeAttr">
        <template v-slot:common>
          <switch-normal v-model="commonAttr.isNotForm" :label="'交互（非表单提交）'" @change="onChangeAttr"></switch-normal>
          <input-normal label="导出表头" v-model="commonAttr.tableName" @change="onChangeAttr"></input-normal>
          <dropdown-normal label="选项样式" :valLists="RADIO_CHECKBOX_SHAPE_TYPES" v-model="commonAttr.shape" @change="onChangeAttr"></dropdown-normal>
          <input-normal label="菜单标题" v-model="commonAttr.title"  @change="onChangeAttr"></input-normal>
          <slider-normal v-model="commonAttr.fontSize" label="字号" :max="100" :step="1" @change="onChangeAttr"></slider-normal>
          <slider-normal v-model="commonAttr.lineHeight" label="行高" :max="10" :step="0.1" @change="onChangeAttr"></slider-normal>
          <slider-normal v-model="commonAttr.letterSpacing" label="选项字距" :max="20" :step="1" @change="onChangeAttr"></slider-normal>
          <color-normal v-model="commonAttr.color" label="文字颜色" format="rgb" @change="onChangeAttr"></color-normal>
          <switch-normal v-model="commonAttr.isColumn" label="排列方向（默认横向）" @change="onChangeAttr"></switch-normal>
          <!-- <dropdown-normal label="列数" :valLists="COLUMN_NUM" v-model="commonAttr.columnNum" @change="onChangeAttr"></dropdown-normal> -->
          <input-normal label="边距" placeholder="上 右 下 左" v-model="commonAttr.margin" @change="onChangeAttr"></input-normal>
          <input-normal label="内距" placeholder="上 右 下 左" v-model="commonAttr.padding" @change="onChangeAttr"></input-normal>
          
          <el-button @click.stop="onAddItem" class="margin-left-right-16" type="primary">
            <el-icon><i class="jy-icon-plus"></i></el-icon>增加选项
          </el-button>
          <el-collapse v-model="activeNames" class="margin-top-10">
            <el-collapse-item v-for="(item, index) in lists" :name="index+1" :key="index">
              <template #title>
                选项{{index+1}}<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteItem(index)"></i>
              </template>
              <input-normal v-model="item.text" label="内容" @change="onUpdateItem(index)"></input-normal>
              <input-normal v-model="item.jumpUrl" label="内容" @change="onUpdateItem(index)"></input-normal>
            </el-collapse-item>
          </el-collapse>
          <el-divider content-position="center">功能设置</el-divider>
          <switch-normal v-model="commonAttr.need" :label="'设为必选ß项'" @change="onChangeAttr"></switch-normal>
        </template> 
        <template v-slot:custom>
          <div class="margin-top-20">
            <input-normal v-model="commonAttr.min" label="最少可选择" @change="onChangeAttr"></input-normal>
            <input-normal v-model="commonAttr.max" label="最多可选择" @change="onChangeAttr"></input-normal>
          </div>
        </template>
      </switch-button>
      <div v-if="siteStatus.isHighComponentConfiguration">
        <el-divider content-position="center">高级属性</el-divider>
        <switch-normal v-model="commonAttr.isRightIcon" label="右侧图标" @change="onChangeAttr"></switch-normal>
        <color-normal v-model="commonAttr.itemStyles.color" label="选项颜色" :format="'rgb'" @change="onChangeAttr"></color-normal>
        <color-normal v-model="commonAttr.itemStyles.backgroundColor" label="选项背景颜色" :format="'rgb'" @change="onChangeAttr"></color-normal>
        <add-img-con :url="commonAttr.itemStyles.url" comAttr="commonAttr.itemStyles" picAttr="url" :isCrop='false' :height="100" class="margin-left-right-16"></add-img-con>
        <input-normal v-model="commonAttr.itemStyles.url" label="图标" @change="onChangeAttr"></input-normal>
        <el-divider content-position="center">选中样式设置</el-divider>
        <color-normal v-model="commonAttr.selectedStyles.color" label="选项颜色" :format="'rgb'" @change="onChangeAttr"></color-normal>
        <color-normal v-model="commonAttr.selectedStyles.backgroundColor" label="选项背景颜色" :format="'rgb'" @change="onChangeAttr"></color-normal>
        <add-img-con :url="commonAttr.selectedStyles.url" comAttr="commonAttr.selectedStyles" picAttr="url" :isCrop='false' :height="100" class="margin-left-right-16"></add-img-con>
        <input-normal v-model="commonAttr.selectedStyles.url" label="图标" @change="onChangeAttr"></input-normal>
      </div>
    </el-form>
  </right-template>
</template>

<script setup lang="ts">
import SwitchButton from '@/views/components/switch-button.vue'
import { useWebComponentStore } from '@/store/web/component'
import { useWebSiteStore } from '@/store/web/site'
import { COMPONENT_TYPES, RADIO_CHECKBOX_SHAPE_TYPES } from '@/const/'
import { ROTATE3D_LIST } from '@/const/web/'
import { ComponentTypesDefaultDom } from '@/store/models/component-default-data'

const useWebComponent = useWebComponentStore()
const useWebSite = useWebSiteStore()
const siteStatus = computed(() => {
  return useWebSite.siteStatus
})
let componentData_: any
const componentData = computed(() => {
  componentData_ = useWebComponent.currentComponentData
  return componentData_
})
let commonAttr_: any
const commonAttr = computed(() => {
  commonAttr_ = useWebComponent.currentComponentData!.commonAttr
  return commonAttr_
})
const onChangeAttr = () => {
  // useWebComponent.updateCurrentComponentData({ commonAttr: commonAttr_ })
}
const pattern = computed(() => {
  if(useWebComponent.currentComponentData!.cid == COMPONENT_TYPES.wb_radio) {
    return true
  } else {
    return false
  }
})

const activeNames = [1]
const lists = computed(() => {
  return useWebComponent.currentComponentData!.lists
})
const onAddItem = () => {
  let item: IListItem
  if(componentData_.events.rotate3d) {
    item = _.cloneDeep(ROTATE3D_LIST[0])
  } else {
    item = _.cloneDeep(ComponentTypesDefaultDom[componentData_.cid].lists[0])
  }
  if(componentData_.lists && componentData_.lists[0]) {
    item = _.cloneDeep(componentData_.lists[0])
  }
  if(item){
    useWebComponent.addComponentItem(item)
  }
}
const onUpdateItem = (index: number) => {
  useWebComponent.updateComponentItem({ index, item: componentData_.lists[index] })
}
const onDeleteItem = (index: number) => {
  useWebComponent.deleteComponentItem({index})
}
</script>